<template>
  <div class="printJs-container" id="allPage">
    <div id="printPage" class="common-printPage">
      <div class="button-container">
        <el-button type="primary" class="common-button" @click="printType('onePicture')">打印一张图片</el-button>
        <el-button type="primary" class="common-button" @click="printType('allPicture')">打印全部图片</el-button>
        <el-button type="primary" class="common-button" @click="printType('json')">打印Json</el-button>
        <el-button type="primary" class="common-button" @click="printType('html')">打印html</el-button>
      </div>
      <div class="img-container" id="imgPrint">
        <div v-for="item in 4">
          <img :src="Logo" alt="" class="logo-img">
        </div>
      </div>
      <div class="json-container" id="jsonPrint">
        <el-table
          :data="tableData"
          border
          :header-cell-style="{background: variables.tableHeaderBackGroundColor, color: variables.tableHeaderColor}"
        >
          <el-table-column label="活动" prop="title"></el-table-column>
          <el-table-column label="描述" prop="decs"></el-table-column>
          <el-table-column label="状态" prop="state"></el-table-column>
          <el-table-column label="活动时间" prop="created_at"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="config-container">
      <div class="config-title">配置参数</div>
      <el-table
        :data="configData"
        border
        :header-cell-style="{background: variables.tableHeaderBackGroundColor, color: variables.tableHeaderColor}"
      >
        <el-table-column label="参数" prop="params" width="360"></el-table-column>
        <el-table-column label="默认值" prop="default" width="360"></el-table-column>
        <el-table-column label="说明" prop="declare"></el-table-column>
      </el-table>
    </div>
    <div class="problem">
      存在的问题: 打印类型为html，打印样式不全，例如表格的边框没有
    </div>
  </div>
</template>

<script>
import { editTableData } from '@/mock/jsModule/table.js'
import variables from '@/styles/variables.scss'
import printJS from 'print-js'
import logo from '@/assets/image/logo.png'
export default {
  name: 'index',
  data(){
    return {
      Logo: logo,
    }
  },
  computed:{
    variables(){
      return variables
    },
    tableData(){
      var data = JSON.parse(JSON.stringify(editTableData))
      data = data.map(item =>{
        return {
          ...item,
          state: item.state == 1 ? '已开启' : '未开启'
        }
      })
      return data
    },
    configData(){
      const data = [
        {params: 'printable', default: 'null', declare: 'PDF或图像：URL地址;  HTML：元素id;  JSON：数组'},
        {params: 'type', default: '"pdf"', declare: '打印的类型，可选值：pdf、html、image、json、raw-html'},
        {params: 'header', default: 'null', declare: '用于HTML、图像或JSON打印的可选标头。它将放在页面顶部。此属性接收文本或HTML的字符串'},
        {params: 'headerStyle', default: '"font-weight: 300;"', declare: '标头样式文本'},
        {params: 'maxWidth', default: '800', declare: '用于HTML、图像或JSON打印时设置文档的最大宽度（单位：px），在打印HTML时建议与打印内容的宽度保持一致，不然会被压缩'},
        {params: 'css', default: 'null', declare: '可传入单个css文件地址URL地址，或者以字符串数组形式传入多个css文件URL地址'},
        {params: 'style', default: 'null', declare: '传入自定义样式的字符串，作用于被打印的HTML标签上'},
        {params: 'scanStyles', default: 'true', declare: '设置为false时，原本的css样式将会失效，这时候可以使用css参数来引入自定义的样式效果'},
        {params: 'targetStyle', default: 'null', declare: '在打印HTML元素时，只让某些样式生效。该参数允许你传入要生效的样式数组。如["padding-bottom","border-top"]'},
        {params: 'targetStyles', default: 'null', declare: '和targetStyle类似，不过它会处理所有相关的样式，比如[‘border’, ‘padding’]将会包括‘padding-top’、‘border-top’、‘padding-left’、‘border-left’…… 也可以传递[‘*’]来处理所有样式==的身上的首都华盛顿和时代的很多很多'},
        {params: 'ignoreElements', default: '[]', declare: '打印HTML时忽略打印的内容，以字符串数组形式传入元素的id'},
        {params: 'properties', default: 'null', declare: '打印JSON时传入的表头名称，要和JSON中的键值对的键保持一致'},
        {params: 'gridHeaderStyle', default: '"font-weight: bold;"', declare: '打印JSON时，表头的自定义样式'},
        {params: 'gridStyle', default: '"border: 1px solid lightgray; margin-bottom: -1px;"', declare: '打印JSON时，表格的自定义样式'},
        {params: 'repeatTableHeader', default: 'true', declare: '打印JSON时，若为false表头仅显示在第一页，否则在表格的其它页也会显示表头'},
        {params: 'showModal', default: 'null', declare: '若设为true将会显示加载动画和加载提示信息(modalMessage)'},
        {params: 'modalMessage', default: '"Retrieving Document…"', declare: '加载提示信息文本'},
        {params: 'onLoadingStart', default: 'null', declare: '加载PDF时要执行的函数'},
        {params: 'onLoadingEnd', default: 'null', declare: '加载PDF后要执行的函数'},
        {params: 'documentTitle', default: '"Document"', declare: '打印HTML、图像或JSON时显示的文档标题'},
        {params: 'fallbackPrintable', default: 'null', declare: '在打印PDF时，如果浏览器不兼容（检查浏览器兼容性表），PrintJS将在新的选项卡中打开pdf。可以传入另一个pdf文档来代替“printable”中的文档。适用于JS被禁用或者无效的情况'},
        {params: 'onPdfOpen', default: 'null', declare: '在打印PDF时，如果浏览器不兼容（检查浏览器兼容性表），PrintJS将在新的选项卡中打开pdf。可以在此处传递回调函数，发生浏览器不兼容的情况时将执行回调函数。同时适用于某些情况下，你希望处理打印流、更新用户界面等'},
        {params: 'onPrintDialogClose', default: 'null', declare: '浏览器打印对话框关闭后执行回调函数'},
        {params: 'onError', default: 'error => throw error', declare: '发生错误时要执行的回调函数'},
        {params: 'base64', default: 'false', declare: '打印作为base64数据传递的PDF文档时使用'},
      ]
      return data
    }
  },
  methods: {
    // 打印类型
    printType(type){
      switch (type){
        case 'onePicture':
          printJS({
            type: 'image',
            printable: [logo],
            documentTitle: '打印图片',
          })
          break
        case 'allPicture':
          printJS({
            type: 'html',
            printable: 'imgPrint',
            documentTitle: '打印图片',
          })
          break
        case 'json':
          printJS({
            type: 'json',
            documentTitle: '打印表格',
            printable: this.tableData,
            // 打印json时传入的表头名称(必传)，要和json中的键值对的键保持一致
            properties: [
              { field: 'title', displayName: '活动' },
              { field: 'decs', displayName: '描述' },
              { field: 'state', displayName: '状态' },
              { field: 'created_at', displayName: '活动日期' },
            ],
            // 打印JSON时，表格的自定义样式
            gridStyle: 'text-align: left;border: 1px solid lightgray;font-size: 12px; line-height: 26px;',
            gridHeaderStyle: 'font-weight: 500; border: 1px solid lightgray; line-height: 30px;',
          })
          break
        case 'html':
          printJS({
            type: 'html',
            printable: 'allPage',
            documentTitle: '打印html页面',
            // 写入自定义样式
            style: `
            th, td{ text-align: left; border: 1px solid lightgray; font-size: 12px; padding: 0 10px;}
            .el-button{ border: 1px solid #62afe3; margin-right: 20px;}
            .img-container{ margin: 20px 0;}
            .config-container{ padding-top: 30px;}
            .config-title{ margin-bottom: 10px;}
            .problem{ margin-top: 100px; border-left: 10px solid #42b983;  background: #f5f7fa; padding: 20px;}
            `
          })
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.printJs-container{
  text-align: left;
}
.img-container{
  margin-top: 20px;
  display: flex;
  .logo-img{
    width: 200px;
  }
}
.json-container{
  margin-top: 20px;
}
.config-title{
  margin: 20px 0 10px;
  font-weight: 700;
  color: $fontColor;
}
.problem{
  margin-top: 20px;
  background-color: $tipsBackground;
  border-left: 20px solid $greenColor;
  line-height: 30px;
  padding: 20px;
  color: $fontColor;
}
</style>
<style lang="scss">
.json-container{
  th, td{
    width: auto !important;
  }
}
</style>
